<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/wk3un4/houtai/lib/layui/css/layui.css" />
<script type="text/javascript" src="/wk3un4/houtai/lib/layui/layui.js"></script>
</head>
<body>
	<div class="layui-form-item" style="margin-top: 20px;" onsubmit="false">
		<div class="layui-form-item">
			<label class="layui-form-label">是否显示</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" name="homeFlag" id="homeFlag" class="layui-input">
			</div>
			<label class="layui-form-label">所属分类:</label>
			<div class="layui-input-inline" style="width: 150px;">
				<div class="layui-input-inline" style="width: 120px;">
				<select name="newsTypeId" id="newsTypeId" class="layui-input">
				<option value="">请选择</option>
					<c:forEach items="${types}" var="t">
						<option  value="${t.id}">${t.newName}</option>
					</c:forEach>
				</select>
			</div>
			</div>
			<button class="layui-btn" id="search" data-type="reload">查询</button>
		</div>
	</div>
	<!--lay-filter="test"，给表格加的一个过滤器，当我有一个点击的操作-->
	<table class="layui-hide" id="test" lay-filter="test"></table>
	<!--数据表格-->
	<script type="text/html" id="toolbarDemo">
			<!--表头上面引入了一个添加用户的操作-->
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm" lay-event="addNew">添加新闻</button>
			</div>
		</script>
	<script type="text/html" id="barDemo">
			<!--在表格的行内加的工具-->
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
	<!--检查js文件是否引入成功-->
	<script>
		layui.use('table', function() {//加载表格模块
			var table = layui.table;
			var $ = layui.jquery;

			table.render({ //初始化数据表格的，（专业的叫法渲染表格）
				elem : '#test', //table的id
				toolbar : '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
				url : '/wk3un4/NewZsgServlet', //请求服务器的连接地址
				where : {
					method : 'selectAllJson'
				}, //token怎么传
				method : 'POST', //请求的方式
				cols : [ [ {
					field : 'id',
					title : '编号',
					width : 80,
					align : 'center'
				}, {
					field : 'time',
					title : '发布时间',
					width : 150,
					align : 'center'
				}, {
					field : 'title',
					title : '标题',
					width : 280,
					align : 'center'
				}, {
					field : 'content',
					title : '内容',
					width : 180,
					align : 'center'
				}, {
					field : 'newName',
					title : '所属分类',
					width : 150,
					align : 'center'
				}, {
					field : 'homeFlag',
					title : '是否显示在首页',
					width : 150,
					align : 'center'
				}, {
					title : '操作',
					width : 180,
					align : 'center',
					toolbar : '#barDemo'
				} ] ],
				id : 'testReload',//写了一个id，目的是重新加载数据表格
				page : true
			});
			table.on('toolbar(test)', function(obj) {//监听头部工具栏
				switch (obj.event) {
				case 'addNew':
					//layer.msg('添加用户');
					layer.open({//打开一个页面
						type : 2,//在当前的页面之上，弹框形式，展示出添加用户的界面
						area : [ '500px', '400px' ],//页面宽高
						content : '/wk3un4/NewZsgServlet?method=addAll',//页面所在的位置
						title : "添加新闻",
						end:function(){
							window.location.reload();//当窗口关闭之后刷新页面
						}
					});
					break;
				}
				;
			});
			table.on('tool(test)', function(obj) {//监听行内工具栏
				if (obj.event === 'del') {
					console.log(obj.data);
					var url ='/wk3un4/NewZsgServlet';//请求服务器的地址
					//确保数据没有问题就进行ajax提交了
					$.post(url, {id:obj.data.id,method:'delete'},
						function(data) {
							if(data.count>0){
								console.log('删除成功');
								window.location.reload();//当窗口关闭之后刷新页面
							}
						}, "json");
				} else if (obj.event === 'edit') {
					console.log(obj.data);
					layer.open({ //打开一个页面
						type: 2, //在当前的页面之上，弹框形式，展示出添加用户的界面
						area: ['500px', '400px'], //页面的宽高
						content: '/wk3un4/NewZsgServlet?method=addAllTwo', //页面所在的位置
						title: '编辑新闻',
						success:function(layero,index){
							var body=layer.getChildFrame('body',index);
							body.contents().find("#id").val(obj.data.id);
							body.contents().find("#time").val(obj.data.time);
							body.contents().find("#title").val(obj.data.title);
							body.contents().find("#content").val(obj.data.content);
							body.contents().find("#homeFlag").val(obj.data.homeFlag);
							body.contents().find("#newsTypeId").val(obj.data.newsTypeId);
						},
						end:function(){
							window.location.reload();//当窗口关闭之后刷新页面
						}
					});
				} 
			});
			//给search一个点击事件
			//当我执行点击的时候走这个方法 search是button的id
			$('#search').on('click', function() {
				var homeFlag = $("#homeFlag").val();//上面搜索框的id
				var newsTypeId = $("#newsTypeId").val();//上面搜索框的id
				table.reload('testReload', {//testReload上面渲染表格的id
					where : {//接口需要的请求参数
						'homeFlag' : homeFlag,
						'newsTypeId' : newsTypeId
					}
				});
			});

		});
	</script>
</body>
</html>
